Oltre gli Enum: Const Assertions vs. Union Types in TypeScript

Nel mondo di JavaScript con tipizzazione statica tramite TypeScript, gli enum sono stati a lungo la scelta prediletta per rappresentare un insieme fisso di costanti nominate. Offrono un modo chiaro e leggibile per definire una collezione di valori correlati. Tuttavia, con la crescita e l'evoluzione dei progetti, gli sviluppatori cercano spesso alternative più flessibili e talvolta più performanti. Due potenti contendenti che emergono frequentemente sono le const assertions e gli union types. Questo post approfondisce le sfumature dell'utilizzo di queste alternative agli enum tradizionali, fornendo esempi pratici e guidandoti su quando scegliere l'una o l'altra.

Comprendere gli Enum Tradizionali di TypeScript

Prima di esplorare le alternative, è essenziale avere una solida comprensione di come funzionano gli enum standard di TypeScript. Gli enum consentono di definire un insieme di costanti numeriche o di stringa nominate. Possono essere numerici (l'impostazione predefinita) o basati su stringhe.

Enum Numerici

Per impostazione predefinita, ai membri di un enum vengono assegnati valori numerici a partire da 0.

            enum DirectionNumeric {
  Up,
  Down,
  Left,
  Right
}

let myDirection: DirectionNumeric = DirectionNumeric.Up;
console.log(myDirection); // Risultato: 0

            

              
                Copy
              
            
          

È anche possibile assegnare esplicitamente valori numerici.

            enum StatusCode {
  Success = 200,
  NotFound = 404,
  InternalError = 500
}

let responseStatus: StatusCode = StatusCode.Success;
console.log(responseStatus); // Risultato: 200

            

              
                Copy
              
            
          

Enum di Stringhe

Gli enum di stringhe sono spesso preferiti per la loro migliore esperienza di debug, poiché i nomi dei membri vengono preservati nel JavaScript compilato.

            enum ColorString {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

let favoriteColor: ColorString = ColorString.Blue;
console.log(favoriteColor); // Risultato: "BLUE"

            

              
                Copy
              
            
          

L'Overhead degli Enum

Sebbene gli enum siano comodi, comportano un leggero overhead. Quando vengono compilati in JavaScript, gli enum di TypeScript si trasformano in oggetti che spesso hanno mappature inverse (ad esempio, mappando il valore numerico di nuovo al nome dell'enum). Questo può essere utile, ma contribuisce anche alla dimensione del bundle e potrebbe non essere sempre necessario.

Considera questo semplice enum di stringhe:

            enum Status {
  Pending = "PENDING",
  Processing = "PROCESSING",
  Completed = "COMPLETED"
}

            

              
                Copy
              
            
          

In JavaScript, questo potrebbe diventare qualcosa del genere:

            var Status;
(function (Status) {
    Status["Pending"] = "PENDING";
    Status["Processing"] = "PROCESSING";
    Status["Completed"] = "COMPLETED";
})(Status || (Status = {}));

            

              
                Copy
              
            
          

Per insiemi di costanti semplici e di sola lettura, questo codice generato può sembrare un po' eccessivo.

Alternativa 1: Const Assertions

Le const assertions sono una potente funzionalità di TypeScript che consente di indicare al compilatore di inferire il tipo più specifico possibile per un valore. Se usate con array o oggetti destinati a rappresentare un insieme fisso di valori, possono servire come un'alternativa leggera agli enum.

Const Assertions con Array

È possibile creare un array di letterali di stringa e poi usare una const assertion per rendere il suo tipo immutabile e i suoi elementi dei tipi letterali.

            const statusArray = ["PENDING", "PROCESSING", "COMPLETED"] as const;

type StatusType = typeof statusArray[number];

let currentStatus: StatusType = "PROCESSING";
// currentStatus = "FAILED"; // Errore: Il tipo '"FAILED"' non è assegnabile al tipo 'StatusType'.

function processStatus(status: StatusType) {
  console.log(`Processing status: ${status}`);
}

processStatus("COMPLETED");

            

              
                Copy
              
            
          

Analizziamo cosa sta succedendo qui:

• as const: Questa asserzione dice a TypeScript di trattare l'array come di sola lettura e di inferire i tipi letterali più specifici per i suoi elementi. Quindi, invece di `string[]`, il tipo diventa `readonly ["PENDING", "PROCESSING", "COMPLETED"]`.
• typeof statusArray[number]: Questo è un tipo mappato. Itera su tutti gli indici di statusArray ed estrae i loro tipi letterali. La firma dell'indice number essenzialmente dice "dammi il tipo di qualsiasi elemento in questo array". Il risultato è un union type: "PENDING" | "PROCESSING" | "COMPLETED".

Questo approccio fornisce una sicurezza dei tipi simile agli enum di stringhe ma genera un JavaScript minimo. Lo stesso statusArray rimane un array di stringhe in JavaScript.

Const Assertions con Oggetti

Le const assertions sono ancora più potenti se applicate agli oggetti. È possibile definire un oggetto in cui le chiavi rappresentano le costanti nominate e i valori sono le stringhe o i numeri letterali.

            const userRoles = {
  Admin: "ADMIN",
  Editor: "EDITOR",
  Viewer: "VIEWER"
} as const;

type UserRole = typeof userRoles[keyof typeof userRoles];

let currentUserRole: UserRole = "EDITOR";
// currentUserRole = "GUEST"; // Errore: Il tipo '"GUEST"' non è assegnabile al tipo 'UserRole'.

function displayRole(role: UserRole) {
  console.log(`User role is: ${role}`);
}

displayRole(userRoles.Admin); // Valido
displayRole("EDITOR"); // Valido

            

              
                Copy
              
            
          

In questo esempio con l'oggetto:

• as const: Questa asserzione rende l'intero oggetto di sola lettura. Ancora più importante, inferisce i tipi letterali per tutti i valori delle proprietà (ad esempio, "ADMIN" invece di string) e rende le proprietà stesse readonly.
• keyof typeof userRoles: Questa espressione produce un'unione delle chiavi dell'oggetto userRoles, che è "Admin" | "Editor" | "Viewer".
• typeof userRoles[keyof typeof userRoles]: Questo è un tipo di ricerca (lookup type). Prende l'unione delle chiavi e la usa per cercare i valori corrispondenti nel tipo userRoles. Ciò si traduce nell'unione dei valori: "ADMIN" | "EDITOR" | "VIEWER", che è il nostro tipo desiderato per i ruoli.

L'output JavaScript per userRoles sarà un semplice oggetto JavaScript:

            var userRoles = {
    Admin: "ADMIN",
    Editor: "EDITOR",
    Viewer: "VIEWER"
};

            

              
                Copy
              
            
          

Questo è significativamente più leggero di un tipico enum.

Quando Usare le Const Assertions

• Costanti di sola lettura: Quando hai bisogno di un insieme fisso di letterali di stringa o numero che non dovrebbero cambiare a runtime.
• Output JavaScript minimo: Se ti preoccupi delle dimensioni del bundle e desideri la rappresentazione a runtime più performante per le tue costanti.
• Struttura simile a un oggetto: Quando preferisci la leggibilità delle coppie chiave-valore, simile a come potresti strutturare dati o configurazioni.
• Insiemi basati su stringhe: Particolarmente utile per rappresentare stati, tipi o categorie che sono meglio identificati da stringhe descrittive.

Alternativa 2: Union Types

Gli union types consentono di dichiarare che una variabile può contenere un valore di uno tra diversi tipi. Se combinati con i tipi letterali (letterali di stringa, numero, booleani), formano un modo potente per definire un insieme di valori consentiti senza la necessità di una dichiarazione di costante esplicita per l'insieme stesso.

Union Types con Letterali di Stringa

È possibile definire direttamente un'unione di letterali di stringa.

            type TrafficLightColor = "RED" | "YELLOW" | "GREEN";

let currentLight: TrafficLightColor = "YELLOW";
// currentLight = "BLUE"; // Errore: Il tipo '"BLUE"' non è assegnabile al tipo 'TrafficLightColor'.

function changeLight(color: TrafficLightColor) {
  console.log(`Changing light to: ${color}`);
}

changeLight("RED");
// changeLight("REDDY"); // Errore

            

              
                Copy
              
            
          

Questo è il modo più diretto e spesso più conciso per definire un insieme di valori di stringa consentiti.

Union Types con Letterali Numerici

Allo stesso modo, è possibile utilizzare i letterali numerici.

            type HttpStatusCode = 200 | 400 | 404 | 500;

let responseCode: HttpStatusCode = 404;
// responseCode = 201; // Errore: Il tipo '201' non è assegnabile al tipo 'HttpStatusCode'.

function handleResponse(code: HttpStatusCode) {
  if (code === 200) {
    console.log("Success!");
  } else {
    console.log(`Error code: ${code}`);
  }
}

handleResponse(500);

            

              
                Copy
              
            
          

Quando Usare gli Union Types

• Insiemi semplici e diretti: Quando l'insieme di valori consentiti è piccolo, chiaro e non richiede chiavi descrittive oltre ai valori stessi.
• Costanti implicite: Quando non è necessario fare riferimento a una costante nominata per l'insieme stesso, ma piuttosto usare direttamente i valori letterali.
• Massima concisione: Per scenari semplici in cui definire un oggetto o un array dedicato sembra eccessivo.
• Parametri di funzione/tipi di ritorno: Eccellente per definire l'insieme esatto di input/output di stringa o numero accettabili per le funzioni.

Confronto tra Enum, Const Assertions e Union Types

Riassumiamo le differenze chiave e i casi d'uso:

Comportamento a Runtime

• Enum: Generano oggetti JavaScript, potenzialmente con mappature inverse.
• Const Assertions (Array/Oggetti): Generano semplici array o oggetti JavaScript. Le informazioni sul tipo vengono cancellate a runtime, ma la struttura dati rimane.
• Union Types (con letterali): Nessuna rappresentazione a runtime per l'unione stessa. I valori sono solo letterali. Il controllo dei tipi avviene puramente in fase di compilazione.

Leggibilità ed Espressività

• Enum: Alta leggibilità, specialmente con nomi descrittivi. Possono essere più verbosi.
• Const Assertions (Oggetti): Buona leggibilità attraverso coppie chiave-valore, imitando configurazioni o impostazioni.
• Const Assertions (Array): Meno leggibili per rappresentare costanti nominate, più adatti per una semplice lista ordinata di valori.
• Union Types: Molto concisi. La leggibilità dipende dalla chiarezza dei valori letterali stessi.

Sicurezza dei Tipi

• Tutti e tre gli approcci offrono una forte sicurezza dei tipi. Garantiscono che solo valori validi e predefiniti possano essere assegnati a variabili o passati a funzioni.

Dimensione del Bundle

• Enum: Generalmente i più grandi a causa degli oggetti JavaScript generati.
• Const Assertions: Più piccoli degli enum, poiché producono semplici strutture dati.
• Union Types: I più piccoli, poiché non generano alcuna struttura dati specifica a runtime per il tipo stesso, basandosi solo su valori letterali.

Matrice dei Casi d'Uso

Ecco una guida rapida:

Esempi Pratici e Migliori Pratiche

Esempio 1: Rappresentare i Codici di Stato delle API

Enum:

            enum ApiStatus {
  Success = "SUCCESS",
  Error = "ERROR",
  Pending = "PENDING"
}

function handleApiResponse(status: ApiStatus) {
  // ... logica ...
}

            

              
                Copy
              
            
          

Const Assertion (Oggetto):

            
const apiStatusCodes = {
  SUCCESS: "SUCCESS",
  ERROR: "ERROR",
  PENDING: "PENDING"
} as const;

type ApiStatus = typeof apiStatusCodes[keyof typeof apiStatusCodes];

function handleApiResponse(status: ApiStatus) {
  // ... logica ...
}

            

              
                Copy
              
            
          

Union Type:

            
type ApiStatus = "SUCCESS" | "ERROR" | "PENDING";

function handleApiResponse(status: ApiStatus) {
  // ... logica ...
}

            

              
                Copy
              
            
          

Raccomandazione: Per questo scenario, un union type è spesso la scelta più concisa ed efficiente. I valori letterali stessi sono abbastanza descrittivi. Se fosse necessario associare metadati aggiuntivi a ciascuno stato (ad esempio, un messaggio user-friendly), un oggetto con const assertion sarebbe una scelta migliore.

Esempio 2: Definire i Ruoli Utente

Enum:

            
enum UserRoleEnum {
  Admin = "ADMIN",
  Moderator = "MODERATOR",
  User = "USER"
}

function getUserPermissions(role: UserRoleEnum) {
  // ... logica ...
}

            

              
                Copy
              
            
          

Const Assertion (Oggetto):

            
const userRolesObject = {
  Admin: "ADMIN",
  Moderator: "MODERATOR",
  User: "USER"
} as const;

type UserRole = typeof userRolesObject[keyof typeof userRolesObject];

function getUserPermissions(role: UserRole) {
  // ... logica ...
}

            

              
                Copy
              
            
          

Union Type:

            
type UserRole = "ADMIN" | "MODERATOR" | "USER";

function getUserPermissions(role: UserRole) {
  // ... logica ...
}

            

              
                Copy
              
            
          

Raccomandazione: Un oggetto con const assertion raggiunge un buon equilibrio qui. Fornisce coppie chiave-valore chiare (ad esempio, userRolesObject.Admin) che possono migliorare la leggibilità quando si fa riferimento ai ruoli, pur rimanendo performante. Anche un union type è un ottimo candidato se i letterali di stringa diretti sono sufficienti.

Esempio 3: Rappresentare le Opzioni di Configurazione

Immagina un oggetto di configurazione per un'applicazione globale che potrebbe avere temi diversi.

Enum:

            
enum Theme {
  Light = "light",
  Dark = "dark",
  System = "system"
}

interface AppConfig {
  theme: Theme;
  // ... altre opzioni di configurazione ...
}

            

              
                Copy
              
            
          

Const Assertion (Oggetto):

            
const themes = {
  Light: "light",
  Dark: "dark",
  System: "system"
} as const;

type Theme = typeof themes[keyof typeof themes];

interface AppConfig {
  theme: Theme;
  // ... altre opzioni di configurazione ...
}

            

              
                Copy
              
            
          

Union Type:

            
type Theme = "light" | "dark" | "system";

interface AppConfig {
  theme: Theme;
  // ... altre opzioni di configurazione ...
}

            

              
                Copy
              
            
          

Raccomandazione: Per impostazioni di configurazione come i temi, l'oggetto con const assertion è spesso ideale. Definisce chiaramente le opzioni disponibili e i loro valori di stringa corrispondenti. Le chiavi (Light, Dark, System) sono descrittive e si mappano direttamente ai valori, rendendo il codice di configurazione molto comprensibile.

Scegliere lo Strumento Giusto per il Lavoro

La decisione tra enum di TypeScript, const assertions e union types non è sempre bianca o nera. Spesso si tratta di un compromesso tra prestazioni a runtime, dimensione del bundle e leggibilità/espressività del codice.

• Scegli gli Union Types quando hai bisogno di un insieme semplice e vincolato di letterali di stringa o numero e desideri la massima concisione. Sono eccellenti per le firme delle funzioni e per semplici restrizioni sui valori.
• Scegli le Const Assertions (con Oggetti) quando desideri un modo più strutturato e leggibile per definire costanti nominate, simile a un enum, ma con un overhead a runtime significativamente inferiore. Questo è ottimo per configurazioni, ruoli o qualsiasi insieme in cui le chiavi aggiungono un significato importante.
• Scegli le Const Assertions (con Array) quando hai semplicemente bisogno di una lista ordinata immutabile di valori, e l'accesso diretto tramite indice è più importante delle chiavi nominate.
• Considera gli Enum di TypeScript quando hai bisogno delle loro funzionalità specifiche, come la mappatura inversa (sebbene sia meno comune nello sviluppo moderno) o se il tuo team ha una forte preferenza e l'impatto sulle prestazioni è trascurabile per il tuo progetto.

In molti progetti TypeScript moderni, si tende a preferire le const assertions e gli union types rispetto agli enum tradizionali, specialmente per le costanti basate su stringhe, grazie alle loro migliori caratteristiche prestazionali e a un output JavaScript spesso più semplice.

Considerazioni Globali

Quando si sviluppano applicazioni per un pubblico globale, definizioni di costanti coerenti e prevedibili sono cruciali. Le scelte che abbiamo discusso (enum, const assertions, union types) contribuiscono tutte a questa coerenza imponendo la sicurezza dei tipi in ambienti e contesti di sviluppo diversi.

• Coerenza: Indipendentemente dal metodo scelto, la chiave è la coerenza all'interno del tuo progetto. Se decidi di utilizzare oggetti con const assertion per i ruoli, mantieni quel pattern in tutta la codebase.
• Internazionalizzazione (i18n): Quando definisci etichette o messaggi che saranno internazionalizzati, usa queste strutture type-safe per garantire che vengano utilizzati solo chiavi o identificatori validi. Le stringhe tradotte effettive saranno gestite separatamente tramite librerie i18n. Ad esempio, se hai un campo `status` che può essere "PENDING", "PROCESSING", "COMPLETED", la tua libreria i18n mapperà questi identificatori interni al testo visualizzato localizzato.
• Fusi Orari e Valute: Sebbene non sia direttamente correlato agli enum, ricorda che quando si ha a che fare con valori come date, orari o valute, il sistema di tipi di TypeScript può aiutare a imporre un uso corretto, ma di solito sono necessarie librerie esterne per una gestione globale accurata. Ad esempio, un union type `Currency` potrebbe essere definito come `"USD" | "EUR" | "GBP"`, ma la logica di conversione effettiva richiede strumenti specializzati.

Conclusione

TypeScript fornisce un ricco set di strumenti per la gestione delle costanti. Sebbene gli enum ci abbiano servito bene, le const assertions e gli union types offrono alternative convincenti e spesso più performanti. Comprendendo le loro differenze e scegliendo l'approccio giusto in base alle tue esigenze specifiche — che si tratti di prestazioni, leggibilità o concisione — puoi scrivere codice TypeScript più robusto, manutenibile ed efficiente che si adatta globalmente.

Abbracciare queste alternative può portare a dimensioni del bundle più piccole, applicazioni più veloci e un'esperienza di sviluppo più prevedibile per il tuo team internazionale.